<template>
  <view
    class="styleContainer"
    :style="{ backgroundImage: 'url(' + srcBg + ')' }"
  >
    <view :style="{ height: titleBarMarginTop }"></view>
    <view class="styleTopContainer">
      <view class="styleTitleContainer">
        <view class="styleTitleLeft">
          <image
            class="styleGoBack"
            :src="srcGoBack"
            @click="clickBack"
            v-if="pagesLength >= 2"
          ></image>
          <image
            class="styleGoBack"
            :src="srcGoHome"
            @click="clickHome"
            v-else
          ></image>
        </view>
        <view class="styleTitleCenter">
          <!-- <span class="styleTitleContent">查职业</span>
          <span class="styleTitleDegree" @click="clickTitleDegree">{{ degreeText }}
            <image class="styleTitleTriangle" :src="srcMajorTriangle"></image>
          </span> -->
        </view>
        <view class="styleTitleRight"></view>
      </view>
      <view class="newTitleContainer">
        <span class="newMainTitle">选职业查选科</span>
        <span class="newSubTitle">选择职业，查询属于自己的选科匹配率</span>
      </view>
      <view
        class="styleSearchContainer"
        @click="clickSearch"
        v-if="!isInputMode"
      >
        <image class="styleSearchIcon" :src="srcInputSearchIcon"></image>
        <u-input
          class="styleInput"
          placeholder="搜索你感兴趣的职业"
          :focus="isFocus"
          v-model="inputText"
          :clearable="false"
          :placeholder-style="placeholderStyle"
          @click="clickInput"
          disabled
        />
      </view>
      <view class="styleSearchInputModeContainer" v-if="isInputMode">
        <u-input
          class="styleInput"
          placeholder="搜索你感兴趣的职业"
          :focus="inputModeIsFocus"
          v-model="inputModeText"
          :clearable="false"
          :placeholder-style="placeholderStyle"
          @input="onInputChanged"
          @blur="onBlur"
        />
        <view class="styleClearContainer">
          <image
            class="styleClearIcon"
            :src="srcInputSearchClose"
            @click="clickClear"
            v-if="isShowClear"
          ></image>
          <view class="styleCancelText" @click="clickCancel">取消</view>
        </view>
      </view>
    </view>
    <view
      class="styleMajorList"
      v-if="isShowMajorList"
      :style="{ height: contentHeight }"
      @click="clickScrollView"
    >
      <scroll-view
        class="styleScrollView"
        scroll-y="true"
        @scrolltoupper="onRefresh"
        @scrolltolower="onLoadMore"
        @scroll="onScroll"
        :upper-threshold="50"
        :lower-threshold="50"
      >
        <view
          class="styleItem"
          v-for="(item, index) in list"
          :key="index"
          @click="handleThirdItemClick(item)"
        >
          <rich-text
            class="thirdChildrenItemTitle"
            :nodes="highLightText(item.positionName)"
          ></rich-text>
          <view class="thirdChildrenItemTags">
            <view class="tagItem">
              <span class="tagLabel">对应学校</span>
              <span class="tagValue">{{ item.subjectStat.collegeNum }}所</span>
            </view>
            <view class="tagItem">
              <span class="tagLabel">平均薪酬</span>
              <span class="tagValue"
                >¥{{ item.subjectStat.averageSalary }}</span
              >
            </view>
            <view class="tagItem">
              <span class="tagLabel">对应职业</span>
              <span class="tagValue"
                >{{ item.subjectStat.professionNum }}个</span
              >
            </view>
            <view class="tagItem">
              <span class="tagLabel">招聘热度</span>
              <span class="tagValue">{{ item.subjectStat.hotNum }}</span>
              <span
                :class="{
                  tagIcon: true,
                  upTrend: item.subjectStat.hotTrend == 1,
                  downTrend: item.subjectStat.hotTrend == 2,
                  noTrend: item.subjectStat.hotTrend == 0,
                }"
              ></span>
            </view>
          </view>
        </view>
        <view class="styleBottom" v-if="isShowBottom"></view>
      </scroll-view>
    </view>
    <view
      class="styleEmpty"
      @click="clickEmptyPage"
      v-if="isShowEmpty"
      :style="{ height: contentHeight }"
      >没有找到符合的内容
    </view>
    <subjectChoiceMajorFilterList
      v-if="isShowMajorFilter"
      :cateType="majorListParam.cateType"
      :specialStyle="{ height: contentHeight }"
      ref="filterListRef"
    />
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </view>
</template>
<script>
import subjectChoiceMajorFilterList from '../components/subjectChoiceMajorFilterList.vue';
import {
  addBuryingPoint,
  customerMatchSubjectPositionList,
} from '@/api/modules/career';
import ShareMixin from '@/mixins/share';
import { cardRegist } from '@/api/modules/career';
import LoginDialog from '@/components/LoginDialog';
export default {
  mixins: [ShareMixin],
  name: 'subjectChoice',
  components: {
    subjectChoiceMajorFilterList,
    LoginDialog,
  },
  data() {
    return {
      personId: '',
      shareTitle: '震惊！同分数段的同学，靠选科组合提前锁定百万年薪赛道',
      sharePath:
        '/pagesSub/nationalCollegeEntranceExamination/subjectChoice/index',
      imageUrl:
        'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png',
      pagesLength: 0,
      isFocus: false,
      inputModeIsFocus: true,
      inputText: '',
      inputModeText: '',
      degreeText: '本科',
      isInputMode: false,
      isShowClear: false,
      isShowMajorList: false,
      isShowEmpty: false,
      isShowMajorFilter: true,
      srcGoBack:
        this.$imgBaseSelf + 'career/positionDictionary/major_go_back.webp',
      srcGoHome: this.$imgBaseSelf + 'home-b.png',
      srcInputSearchIcon:
        this.$imgBaseSelf + 'career/positionDictionary/input_search_icon.webp',
      srcMajorTriangle:
        this.$imgBaseSelf + 'career/positionDictionary/major_triangle.webp',
      srcInputSearchClose:
        this.$imgBaseSelf + 'career/positionDictionary/input_seach_close.webp',
      placeholderStyle:
        'color: rgba(0,0,0,0.25);font-weight:400;font-size:28rpx;',
      list: [],
      loadingType: 'normal',
      majorListParam: {
        cateType: '30',
        pageNo: 1,
        pageSize: 10,
        pages: 0,
      },
      statusBarHeight: 0,
      titleBarMarginTop: 0,
      bubbleMarginTop: 0,
      contentHeight: 0,
      isHome: true,
      srcBg: this.$imgBaseSelf + 'careerPath/subjectChoiceBg.png',
      isShowBottom: false,
      isShowAnim: false,
      buryingPointId: '',
      cardType: '',
    };
  },

  onLoad() {
    this.imageUrl =
      'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png'; //必须重新赋值
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '',
    });
  },
  created() {
    this.pagesLength = getCurrentPages().length;
  },
  mounted() {
    this.getStatusBarHeight();
    if (!this.personId) {
      this.$refs.loginDialog.setVisibility(true);
      return;
    }
  },
  methods: {
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        force: 1,
      };
      params.cardType = 143;
      const res = await cardRegist(params);
      return res;
    },
    loginSuccessBack() {
      //TODO:登录成功后触发埋点
      this.personId = uni.getStorageSync('person-id').slice(2);
      this.cardRegistFn();
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '', //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync('person-id').slice(2) || '0',
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync('cardType') || this.cardType,
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        originType: this.originFrom == 'shareLink' ? 10 : 20,
        statType: statType ? statType : '10',
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    getStatusBarHeight() {
      const res = uni.getSystemInfoSync();
      this.statusBarHeight = res.statusBarHeight;
      this.titleBarMarginTop = this.statusBarHeight + 'px';
      console.log('statusBarHeight:' + this.statusBarHeight + 'px');
      this.bubbleMarginTop = this.statusBarHeight + uni.upx2px(88) + 'px';
      console.log('bubbleMarginTop:' + this.bubbleMarginTop);
      const screenHeight = res.windowHeight;
      console.log('windowHeight:' + screenHeight);
      this.contentHeight =
        screenHeight - uni.upx2px(196) - this.statusBarHeight + 'px';
      console.log('contentHeight:' + this.contentHeight);

      const platform = res.platform;
      console.log('手机平台' + platform);
    },
    clickBack() {
      uni.navigateBack();
    },
    clickHome() {
      uni.switchTab({
        url: '/pages/index/index',
      });
    },
    clickSearch() {
      console.log('clickSearch');
      this.isInputMode = true;
      this.isShowMajorFilter = false;
      // this.srcBg =
      //   this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";
    },
    clickInput() {
      console.log('clickInput');
      this.isInputMode = true;
      this.isShowMajorList = true;
      this.isShowMajorFilter = false;
      // this.srcBg =
      //   this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";
    },
    clickClear() {
      this.inputModeText = '';
      this.isShowClear = false;
      this.isShowEmpty = false;
      this.loadingType = 'normal';
      this.majorListParam.pageNo = 1;
      this.list = [];
      this.isShowMajorFilter = false;
      // this.srcBg =
      //   this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";

      this.inputModeIsFocus = false;
      setTimeout(() => {
        this.inputModeIsFocus = true;
      }, 0);
    },
    clickCancel() {
      console.log('clickCancel');
      this.isShowMajorList = false;
      this.isInputMode = false;
      this.inputModeText = '';
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.list = [];
      this.isShowMajorFilter = true;
      // this.srcBg =
      //   this.$imgBaseSelf +
      //   "career/positionDictionary/bg_major_searchhome.webp";
    },
    onInputChanged(value) {
      // console.log("--value:" + value);
      this.loadingType = 'normal';
      this.majorListParam.pageNo = 1;
      if (value && value.length > 0) {
        this.isShowClear = true;
        this.getData();
      } else {
        this.isShowClear = false;
        this.isShowEmpty = false;
        this.list = [];
      }
    },
    onRefresh() {
      console.log('onRefresh');
    },
    onLoadMore() {
      console.log('onLoadMore');
      this.loadMore();
    },
    onScroll(event) {
      // console.log(event);
    },
    getData() {
      const params = {
        pageNo: this.majorListParam.pageNo,
        pageSize: this.majorListParam.pageSize,
        tagLevel: 3,
        tagType: 10,
        cateType: this.majorListParam.cateType,
        matchName: this.inputModeText,
      };
      console.log('请求参数:', params);
      customerMatchSubjectPositionList(params)
        .then((res) => {
          console.log('列表数据:', res);
          if (res.code == 200) {
            this.list = res.data;
            this.majorListParam.pageNo++;
            this.majorListParam.pages = res.pageparam.pages;
            if (this.majorListParam.pageNo > res.pageparam.pages) {
              this.loadingType = 'nomore';
            }
            if (res.data.length == 0) {
              this.isShowMajorList = false;
              this.isShowEmpty = true;
            } else {
              this.isShowMajorList = true;
              this.isShowEmpty = false;
            }
            if (this.inputModeText == '') {
              this.isShowClear = false;
              this.isShowEmpty = false;
              this.list = [];
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none',
            });
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          console.log('finally');
        });
      this.isShowBottom = false;
    },
    loadMore() {
      console.log('loadMore');
      if (this.loadingType == 'normal') {
        this.loadingType = 'loading';
        setTimeout((res) => {
          // this.list = this.list.concat(this.list);
          const params = {
            pageNo: this.majorListParam.pageNo,
            pageSize: this.majorListParam.pageSize,
            tagLevel: 3,
            tagType: 10,
            cateType: this.majorListParam.cateType,
            matchName: this.inputModeText,
          };
          console.log('加载更多请求参数:', params);
          customerMatchSubjectPositionList(params)
            .then((res) => {
              console.log('加载更多列表数据:', res);
              if (res.code == 200) {
                this.list.push(...res.data);
                this.majorListParam.pageNo++;
                if (this.majorListParam.pageNo > res.pageparam.pages) {
                  this.loadingType = 'nomore';
                  console.log('总条数:' + this.list.length);
                  this.isShowBottom = true;
                }
                if (this.inputModeText == '') {
                  this.isShowEmpty = false;
                }
              } else {
                uni.showToast({
                  title: res.status_desc,
                  icon: 'none',
                });
              }
            })
            .catch((e) => {
              console.log(e);
            })
            .finally(() => {
              console.log('finally');
            });
          this.loadingType = 'normal';
        }, 0);
      }
    },
    highLightText(content) {
      const regex = new RegExp(this.inputModeText, 'gi');
      const highlightedText = content.replace(
        regex,
        '<span style="color:#F75A3E;">' + this.inputModeText + '</span>'
      );
      return highlightedText;
    },
    clickTitleDegree() {
      console.log('--------------->clickTitleDegree');
      this.isShowMajorList = false;
      this.isInputMode = false;
      this.inputModeText = '';
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.list = [];
      this.isShowMajorFilter = true;
      // this.srcBg =
      //   this.$imgBaseSelf +
      //   "career/positionDictionary/bg_major_searchhome.webp";
    },
    clickEmptyPage() {
      console.log('clickEmptyPage');
      this.isInputMode = false;
      this.inputModeText = '';
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.clickCancel();
    },
    handleThirdItemClick(item) {
      console.log('item', item);
      uni.navigateTo({
        url: `/pagesSub/nationalCollegeEntranceExamination/jobMatch/index?positionId=${item.ylPositionId}&positionName=${item.positionName}&collegeNum=${item.subjectStat.collegeNum}&professionNum=${item.subjectStat.professionNum}`,
      });
    },
    onBlur() {
      console.log('onBlur');
    },
    clickScrollView() {
      console.log('clickScrollView');
      if (this.list.length <= 0) {
        this.clickCancel();
      }
    },
    startAnimation() {
      this.isShowAnim = true;
      setTimeout(() => {
        console.log('setTimeout');
        this.isShowAnim = false;
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'AlimamaShuHeiTi-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/saas/AlimamaShuHeiTi-Bold.ttf');
}
@keyframes animationScale {
  from {
    transform: scale(0);
    //从左上角开始缩放
    transform-origin: left top;
  }

  to {
    transform: scale(1);
  }
}

.styleContainer {
  // background: linear-gradient(180deg, #EFF4FF 0%, #FFFFFF 100%);
  //   background-image: url($img-base + "career/positionDictionary/bg_major_search.webp");
  background-size: 100% auto;
  height: 100vh;
  overflow: hidden;
  background-repeat: no-repeat;
  .styleTopContainer {
    .styleTitleContainer {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .styleTitleLeft {
        flex: 1;

        .styleGoBack {
          width: 44rpx;
          height: 44rpx;
          margin-left: 32rpx;
        }
      }

      .styleTitleCenter {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .styleTitleContent {
          font-weight: 800;
          color: #222222;
          line-height: 44rpx;
          font-size: 32rpx;
        }

        .styleTitleDegree {
          font-weight: bold;
          display: flex;
          flex-direction: row;
          border-radius: 6rpx;
          background: #ffffff;
          margin-left: 12rpx;
          padding-top: 10rpx;
          padding-bottom: 10rpx;
          padding-left: 12rpx;
          padding-right: 12rpx;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;

          .styleTitleTriangle {
            width: 12rpx;
            height: 9rpx;
            margin-left: 8rpx;
          }
        }
      }

      .styleTitleRight {
        flex: 1;
      }
    }
    .newTitleContainer {
      display: flex;
      flex-direction: column;
      font-family: PingFangSC, PingFang SC;
      color: #222222;
      text-align: left;
      font-style: normal;
      padding-left: 48rpx;
      .newMainTitle {
        font-family: 'AlimamaShuHeiTi-Bold';
        font-size: 48rpx;
        line-height: 68rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .newSubTitle {
        font-size: 26rpx;
        line-height: 36rpx;
        font-weight: 400;
        margin-bottom: 42rpx;
      }
    }
    .styleSearchContainer {
      display: flex;
      position: relative;
      height: 80rpx;
      background-color: #ffffff;
      margin-left: 32rpx;
      margin-right: 32rpx;
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
      border-radius: 16rpx;
      filter: blur(0px);
      margin-top: 4rpx;
      margin-bottom: 4rpx;

      .styleInput {
        height: 80rpx;
        margin-left: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw; // width: 100%;
        margin-right: 80rpx;
        padding-left: 68rpx;
      }

      .styleSearchIcon {
        position: absolute;
        top: 50%;
        left: 28rpx;
        transform: translateY(-50%);
        width: 40rpx;
        height: 40rpx;
      }

      .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    .styleSearchInputModeContainer {
      display: flex;
      position: relative;
      height: 80rpx;
      background-color: #ffffff;
      margin-left: 32rpx;
      margin-right: 32rpx;
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
      border-radius: 16rpx;
      filter: blur(0px);
      margin-top: 4rpx;
      margin-bottom: 4rpx;

      .styleInput {
        height: 80rpx;
        margin-left: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw; // width: 100%;
        margin-right: 140rpx;
      }

      .styleClearContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        right: 28rpx;
        transform: translateY(-50%);

        .styleClearIcon {
          width: 32rpx;
          height: 32rpx;
        }

        .styleCancelText {
          font-weight: 400;
          color: #888888;
          line-height: 36rpx;
          font-size: 28rpx;
          margin-left: 12rpx;
        }
      }
    }
  }

  .styleMajorList {
    background-color: #eef9fd;
    margin-top: 12rpx;

    .styleScrollView {
      height: calc(100vh - 435rpx);
      background: #fff;
      margin: 0 32rp;
      .styleItem {
        display: flex;
        flex-direction: column;
        width: 100vw;
        justify-content: center;
        margin: 0 32rpx;
        border-bottom: 1.2rpx solid #f5f5f5;
        padding: 24rpx 0;
        .thirdChildrenItemTitle {
          font-size: 28rpx;
          font-family: PingFangSC;
          font-weight: bold;
          color: #222222;
          line-height: 30rpx;
          margin-bottom: 26rpx;
        }

        .thirdChildrenItemTags {
          display: flex;
          flex-wrap: wrap;
          .tagItem {
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #bfbfbf;
            line-height: 28rpx;
            width: 50%;
            margin-bottom: 8rpx;
            .tagLabel {
              color: #bfbfbf;
              margin-right: 16rpx;
            }
            .tagValue {
              color: #333333;
            }
            .tagIcon {
              width: 20rpx;
              height: 20rpx;
              margin-left: 8rpx;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              &.upTrend {
                background-image: url($img-base + 'careerPath/majorTrendUp.png');
              }
              &.downTrend {
                background-image: url($img-base + 'careerPath/majorTrendDown.png');
              }
              &.noTrend {
                background-image: url($img-base + 'careerPath/majorTrendNo.png');
              }
            }
          }
        }
      }

      .styleBottom {
        background-color: transparent;
        height: 50rpx;
      }
    }
  }

  .styleEmpty {
    width: 100vw;
    height: calc(100vh - 266rpx);
    font-weight: 400;
    color: #222222;
    line-height: 36rpx;
    font-size: 28rpx;
    text-align: center;
    padding-top: 48rpx;
  }
}

.styleHasAnimation {
  animation: animationScale 0.5s ease-in-out alternate;
}
</style>
